<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline" v-show="true">
      <el-form-item label="部门名称">
        <el-input v-model="formInline.name"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" placeholder="活动区域">
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="add(1)">新增</el-button>
        <el-button @click="download">导出excel</el-button>
      </el-form-item>
  </el-form>
  <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="tree">
    <el-table-column
        prop="name"
        label="部门名称"
        sortable
        width="180">
    </el-table-column>
    <el-table-column
        prop="orderNum"
        label="排序"
        sortable
        width="180">
    </el-table-column>
    <el-table-column
        prop="status"
        label="状态">
      <template v-slot="scope">
        <el-tag>{{scope.row.status==0?'正常':'停用'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="创建时间">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template v-slot="scope">
        <el-button @click="add(scope.row)" type="text" size="small">新增</el-button>
        <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
        <el-button @click="update(scope.row)" type="text" size="small">修改</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog width="800px" :title="title" :visible.sync="dialogFormVisible" :props="{ checkStrictly: true }" append-to-body>
    <el-form label-position="left" label-width="80px" :model="form" :rules="rules" ref="form">
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级部门" label-width="120px">
            <el-select v-model="selectValue" ref="selectTree">
              <el-option
                  v-for="item in optionData(options)"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                  style="display: none"
              ></el-option>
              <el-tree
                  :data="options"
                  :props="tree"
                  highlight-current
                  @node-click="handleNodeClick"
                  :expand-on-click-node="expandOnClickNode"
                  default-expand-all
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" :label-width="formLabelWidth" prop="leader">
            <el-input v-model="form.leader"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="显示排序" :label-width="formLabelWidth" prop="orderNum">
            <el-input-number v-model="form.orderNum" @change="handleChange" :min="0" label="描述文字"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门状态" :label-width="formLabelWidth">
            <el-radio v-model="form.status" label="0">正常</el-radio>
            <el-radio v-model="form.status" label="1">停用</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="addDept('form')">确 定</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      formInline: {
        name: '',
        status: ''
      },
      tree: {
        children: 'children',
        hasChildren: 'hasChildren',
        label: 'name'
      },
      dialogFormVisible: false,
      form: {
        id:'',
        status:'0',
        parentId:''
      },
      formLabelWidth: '120px',
      options: [],
      selectValue: '',
      expandOnClickNode: true,
      title:'',
      rules:{
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
        ],
        leader:[
          { required: true, message: '负责人不能为空', trigger: 'blur' },
        ],
        phone:[
          { required: true, message: '电话不能为空', trigger: 'blur' },
        ],
        email:[
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
        ],
        orderNum:[
          { required: true, message: '显示排序不能为空', trigger: 'blur' },
        ]
      },
      aaa:''
    }
  },
  methods: {
    deptList() {
      this.axios.post("system/dept/deptList", this.formInline).then(r => {
        if (r.data.code == 200) {
          this.tableData = r.data.data
          console.log(this.tableData)
        }
      })
      // this.axios.post("http://localhost:9017/dept/deptList",this.formInline).then(r => {
      //       if (r.data.code == 200) {
      //             this.tableData = r.data.data
      //             console.log(this.tableData)
      //       }
      // })
    },
    getParent() {
      this.axios.get("system/dept/getParent").then(r => {
        this.options = r.data.data
      })
      // this.axios.get("http://localhost:9017/dept/getParent").then(r=> {
      //   this.options = r.data.data
      // })
    },
    onSubmit() {
      this.tree.children = null
      this.deptList()
    },
    add(row) {
      this.title='新增部门'
      this.aaa='0'
      this.form={
        id:'',
        status:'0',
        parentId:''
      }

      if (row!=1){
        this.axios.get("system/dept/getById?id="+row.id).then(r=>{
          this.form.id=r.data.id
          this.selectValue=r.data.data.name
          this.form.parentId=row.id
        })
      }else {
        this.form={
          id:'',
          status:'0',
          parentId:''
        }
        this.selectValue=''
      }


        // this.axios.get("http://localhost:9017/dept/getParentById?id="+row.id).then(r=> {
        //     this.form.id=r.data.id
        //     this.selectValue=r.data.data.name
        // })
      this.dialogFormVisible = true
    },
    addDept(formName) {
      if (this.aaa=='1'){
        this.axios.post("system/dept/updateDept",this.form).then(()=>{
          this.deptList()
          this.dialogFormVisible=false
        })
      }else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.axios.post("system/dept/saveDept", this.form).then(r => {
              if (r.data.code == 200) {
                this.deptList()
                this.dialogFormVisible = false
              }else {
                this.$message.error(r.data.msg)
              }
            })
            // this.axios.post("http://localhost:9017/dept/saveDept",this.form).then(r => {
            //   if (r.data.code == 200) {
            //     this.dialogFormVisible = false
            //   }
            // })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }


    },
    del(row) {
      this.axios.get("system/dept/delDept?id=" + row.id).then(() => {
        this.deptList()
      })
      // this.axios.get("http://localhost:9017/dept/delDept?id=" + row.id).then(() => {
      //   this.deptList()
      // })
    },
    update(row) {
      this.title='修改部门'
      this.aaa='1'
      this.dialogFormVisible=true
        this.axios.get("system/dept/getById?id="+row.id).then(r=>{
          this.form=r.data.data
          console.log(r.data.data)
        })
      // this.axios.get("http://localhost:9017/dept/getById?id="+row.id).then(r => {
      //     this.form=r.data.data
      //     console.log(this.form)
      // })

      if (this.form.parentId!='0'){
        this.axios.get("system/dept/getParentById?id="+row.id).then(r=> {
          this.selectValue=r.data.data.name
        })
      }
      this.selectValue=''
    },
    download() {
      location.href="http://192.168.137.162:8888/system/dept/download"
    },
    optionData(array,result=[]){
      array.forEach(item =>{
        result.push({label:item.name,value:item.id})
        if (item.children&&item.children.length!==0){
          this.optionData(item.children,result)
        }
      })
      return JSON.parse(JSON.stringify(result))
    },
    handleNodeClick(node){
      this.form.id=node.id
      console.log(node)
      this.selectValue=node.name;
      this.$refs.selectTree.blur();
    },
    handleChange(value) {
      console.log(value);
    }

  },
  created() {
    this.deptList()
    this.getParent()
  }
}
</script>

<style>

</style>
